<template>
  <view class="detail">
    <nav-bar title="患者主页"></nav-bar>
    <scroll-view scroll-y :style="{ height: mainHeight }">
      <view class="patient-box">
        <view class="patient-info">
          <view class="img-box">
            <image
              class="img"
              :src="patientDetail.userPhoto"
              mode="aspectFill"
            />
          </view>
          <view class="info-box">
            <view class="info">
              <view class="name">{{ patientDetail.name }}</view>
              <view class="sex">{{ patientDetail.sex ? patientDetail.sex === 1 ? '男' : '女' : '未知' }}</view>
              <view class="age">{{ patientDetail.age || '--' }}岁</view>
            </view>
            <view class="label">{{ patientDetail.remark || '' }}</view>
          </view>
          <!-- <view class="btn" @click="clickContact">联系</view> -->
        </view>
        <view class="detail-info">
          <view>
            <view class="detail-item'" v-for="(item, index) in detailConfig.slice(0,5)" :key="index">
              <view class="label-box">{{ item.label }}：</view>
                <view class="value-box">
                  <view class="value">
                    {{ patientDetail[item.key] || '' }}
                    <text class="unit">{{ item.unit || '' }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="desc-text" @click="showAllDesc = !showAllDesc">
              {{ showAllDesc ? '收起'  : '展开' }}<uni-icons type="down" size="15"></uni-icons>
            </view>
            <view v-if="showAllDesc">
              <view class="detail-item img-item" v-for="(item, index) in detailConfig.slice(5,8)" :key="index">
                <view class="label-box">{{ item.label }}：</view>
                  <view class="value-box">
                    <view class="img-box">
                      <image
                        v-for="(iItem, iIndex) in patientDetail[item.key]"
                        :key="iIndex"
                        class="img"
                        :src="iItem"
                        mode="aspectFill"
                        @click="previewImage(item.key, iIndex)"
                      />
                    </view>
                  </view>
                </view>
              </view>
            </view>
          <!-- <view
            v-if="patientDetail.medicineState === 1"
            class="assess-btn"
            @click="clickToAssess"
          >去评估</view>
          <view
            v-else
            class="assess-btn"
            @click="clickDetail"
          >查看评估报告</view> -->
      </view>
      <view class="plan-title">
        <view class="title">TA的训练计划</view>
        <view
          class="add-btn"
          @click="clickAddPlan"
        >
          <uni-icons class="plus-icon" type="plus" color="#115BAA" size="20"></uni-icons>添加
        </view>
      </view>
      <you-scroll
        :loadingHeight="loadingHeight"
        :mainHeight="scrollHeight"
        :isAllData="isAllData"
        :isRequestSuccess="isRequestSuccess"
        @onRefresh="onRefresh"
        @loadMore="loadMore"
      >
        <template>
          <view v-if="isLoading" class="common-loading">
            <image class="loading-img" :src="baseIconUrl + '/commonIcon/icon_loading.png'" />
            正在加载数据，请稍后......
          </view>
          <view class="common-no-data" v-else-if="!planList || planList.length === 0">
            <image class="no-data-img" :src="baseIconUrl + '/commonIcon/icon_no_data.png'" />
            <view class="text">暂无数据</view>
          </view>
          <view v-else>
            <plan-list
              :planList="planList"
              :patientName="patientDetail.name"
              @assess="clickAssess"
            ></plan-list>
          </view>
        </template>
      </you-scroll>
    </scroll-view>
  </view>
</template>

<script>
  import PlanList from '../../components/planList.vue'
  import api_physician from '@/api/physician.js'
  import { baseIconUrl, baseUrl } from '@/config'
  export default {
    name: 'PatientDetail',
    components: { PlanList },
    data() {
      return {
        baseIconUrl,
        baseUrl,
        mainHeight: '',
        medicineId: null,
        patientDetail: {},
        detailConfig: [
          { label: '身高', key: 'bodyHeight', unit: 'cm' },
          { label: '体重', key: 'bodyWeight', unit: 'kg' },
          // { label: '电 话', key: 'phoneNumber', fatherKey: 'baUser' },
          { label: '时间', key: 'createDate' },
          // { label: '详 情', key: 'detailInfo' },
          { label: '运动习惯', key: 'exerciseHabits' },
          { label: '备 注', key: 'remark' },
          { label: '诊断报告', key: 'imgList', isImg: true },
          { label: '影像学检查报告', key: 'imageReportList', isImg: true },
          { label: '体态图', key: 'bodySignList', isImg: true },
        ],
        loadingHeight: '',
        scrollHeight: '',
        isAllData: false,
        isRequestSuccess: false,
        isLoading: false,
        planList: [],
        showAllDesc: false,
        bodySignList:[]
      }
    },
    onLoad(options) {
      this.mainHeight = this.$store.getters.heightData.noTabMainHeight + 'px'
      this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 200 + 'px'
      this.loadingHeight = this.$store.getters.heightData.noTabMainHeight - 220 + 'px'
      this.medicineId = options.medicineId
      this.getPatientDetail()
    },

    methods: {
      getPatientDetail() {
        const params = {
          id: this.medicineId
        }
        api_physician.fetchMedicinesDetail(params).then(res => {
          if (res.code !== 200) return
          const result = res.data
          this.patientDetail = {
            ...result,
            phoneNumber: result.baUser.phoneNumber,
            imgList: result.hospitalReport && result.hospitalReport.split(',').map(iItem => {
              return iItem ? iItem.includes('http') ? iItem : this.baseUrl + iItem : ''
            }),
            imageReportList: result.imageReport && result.imageReport.split(',').map(iItem => {
              return iItem ? iItem.includes('http') ? iItem : this.baseUrl + iItem : ''
            }),
            userPhoto: result.baUser.userPhoto
              ? result.baUser.userPhoto.includes('http')
                ? result.baUser.userPhoto : this.baseUrl + result.baUser.userPhoto 
              : '',
            bodySignList:[result.bodySignBackImg, result.bodySignFaceImg, result.bodySignSideImg]
          }
          this.planList = result.baPlans
          this.total = this.planList.length
          this.isRequestSuccess = true
        })
      },
      // 全局去评估
      clickToAssess() {
        uni.navigateTo({
          url: `/subPages/physicianTrainPlan/plan/assessReport?patientName=${this.patientDetail.name}&medicineId=${this.medicineId}`
        })
      },
      // 全局查看评估报告
      clickDetail() {
        uni.navigateTo({
          url: `/subPages/physicianTrainPlan/plan/assessReport?patientName=${this.patientDetail.name}&medicineId=${this.medicineId}&justView=${true}`
        })
      },
      // 计划列表去评估
      clickAssess(item) {
        uni.navigateTo({
          url: `/subPages/physicianTrainPlan/plan/assessReport?patientName=${this.patientDetail.name}&planId=${item.id}&medicineId=${this.medicineId}`
        })
      },
      // 全局添加计划
      clickAddPlan() {
        uni.navigateTo({
          url: `/subPages/physicianTrainPlan/plan/addPlan?medicineId=${this.medicineId}&patientId=${this.patientDetail.userId}&patientName=${this.patientDetail.name}`
        })
      },
      previewImage(key, iIndex) {
        const url = this.patientDetail[key][iIndex]
        uni.previewImage({
          current: url,
          urls: this.patientDetail[key],
          longPressActions: {
            itemList: ['保存图片'],
            success: function(data) {
              if (data.tapIndex === 0) {
                uni.saveImageToPhotosAlbum({
                  filePath: url,
                  success: (result) => {
                    uni.showToast({
                      title: '保存成功',
                      icon: 'none'
                    })
                  },
                  fail: (error) => {
                    uni.showToast({
                      title: '保存失败',
                      icon: 'none'
                    })
                  }
                })
              }
            }
          }
        })
      },
      // 下拉刷新
      onRefresh() {
        this.planList = []
        this.isAllData = false
        this.isRequestSuccess = false
        this.getPatientDetail()
      },
      // 上拉加载
      loadMore() {
        if (this.planList.length < this.total) {
          this.pageNum++
          this.isAllData = false
          this.isRequestSuccess = false
          this.getPatientDetail()
        } else {
          this.isAllData = true
        }
      }
    }
  }
</script>
<style lang="scss">
  .detail {
    height: 100vh;
    background-color: #F0F3F5;
  }
  .patient-box {
    background: linear-gradient(to bottom, #5992e3, transparent) no-repeat;
    background-size: 100% 50%;
    .patient-info {
      display: flex;
      align-items: center;
      height: 180rpx;
      padding: 30rpx;
      .img-box {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        overflow: hidden;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .info-box {
        flex: 1;
        margin: 0 20rpx;
        .info {
          display: flex;
          align-items: center;
          .name {
            font-size: 36rpx;
            font-weight: 500;
            color: #FFF;
          }
          .sex,
          .age {
            margin-left: 20rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: #FFF;
          }
        }
        .label {
          display: inline-block;
          margin-top: 16rpx;
          font-size: 24rpx;
          font-weight: 400;
          border-radius: 8rpx;
          color: rgba(255, 255, 255, .7);
        }
      }
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60rpx;
        padding: 0 36rpx;
        border-radius: 30rpx;
        font-size: 24rpx;
        color: #FFF;
        background-color: #115BAA;
      }
    }
    .detail-info {
      margin: 10rpx 30rpx 0;
      padding: 40rpx;
      border-radius: 16rpx;
      background-color: #FFF;
      .detail-item {
        display: flex;
        margin-bottom: 10rpx;
        .label-box {
          color: #000;
        }
        .value-box {
          flex: 1;
          .value {
            color: #808080;
            text-align: justify;
            .unit {
              margin-left: 4rpx;
            }
          }
          .img-box {
            display: flex;
            flex-wrap: wrap;
            .img {
              width: 146rpx;
              height: 138rpx;
              margin: 0 12rpx 12rpx;
            }
          }
        }
      }
      .img-item{
        flex-direction: column;
      }
      .assess-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 90rpx;
        margin-top: 30rpx;
        border-radius: 45rpx;
        font-size: 32rpx;
        color: #FFF;
        background-color: #115BAA;
      }
    }
  }
  .plan-title {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    .title {
      font-size: 32rpx;
      font-weight: 500;
    }
    .add-btn {
      display: flex;
      align-items: center;
      .plus-icon {
        margin-right: 6rpx;
      }
    }
  }
</style>
